<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>likevue</title>
</head>
<body>
    <div id="root">
        <div>{{people.name}}</div>
        <div>{{message}}</div>
    </div>

    <script>

        function commpiler(template, data) {
            let childNodes = template.childNodes;
            childNodes.forEach(node => {
                let nodeType = node.nodeType;
                // nodeType // 3 文本  1 元素
                if (nodeType === 3) {
                    let text = node.nodeValue;
                    text = text.replace(/\{\{(.+?)\}\}/g, (item, itemInner) => {
                        return getValueBypath(data, itemInner);
                    });
                    node.nodeValue = text;
                } else if (nodeType === 1) {
                    commpiler(node, data);
                }
            });
        }

        function getValueBypath(obj, path) {
            const paths = path.split('.');
            let prop;
            let value = obj;
            while (prop = paths.shift()) {
                console.log('prop', prop);
                value = value[prop];
            }
            return value;
        }

        function JGvue(options) {
            this._data = options.data;
            this._el = options.el;
            this._templateDom = document.querySelector(this._el);
            this._parent = this._templateDom.parentNode;
            this.render(this._templateDom, this._data);
        }
        // 末班数据添加到dom中
        JGvue.prototype.render = function(template, data) {
            this.compiler(template, data);
        }

        // 将模板与数据结合得到真正dom元素
        JGvue.prototype.compiler = function(template, data) {
            let cloneNode = template.cloneNode(true);
            commpiler(cloneNode, data)
            this.upDate(cloneNode)
        }

        // 将dom放入页面中去
        JGvue.prototype.upDate = function(realDom) {
            this._parent.replaceChild(realDom, document.querySelector(this._el))
        }

        let app = new JGvue({
            el: '#root',
            data: {
                name: 'str',
                message: '消息',
                people: {
                    name: '宋天瑞'
                }
            }
        })
    </script>
</body>
</html>